<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Responsive Flexbox Nested Layout</title>  
    <link rel="stylesheet" href="styles.css">  
</head>  
<body>  
    <!-- 媒体查询+flex布局，嵌套（子元素也是实现响应式） -->
    <header>  
        <h1>My Responsive Nested Flexbox Layout</h1>  
    </header>  
    <main class="content borderBox">  
        <section class="item borderBox">  
            <div class="sub-item borderBox">Sub Item 1</div>  
            <div class="sub-item borderBox">Sub Item 2</div>  
            <div class="sub-item borderBox">Sub Item 3</div>  
            <div class="sub-item borderBox">Sub Item 4</div>  
        </section>  
        <section class="item borderBox">  
            <div class="sub-item borderBox">Sub Item 1</div>  
            <div class="sub-item borderBox">Sub Item 2</div>  
            <div class="sub-item borderBox">Sub Item 3</div>  
            <div class="sub-item borderBox">Sub Item 4</div>  
        </section>  
        <section class="item borderBox">  
            <div class="sub-item borderBox">Sub Item 1</div>  
            <div class="sub-item borderBox">Sub Item 2</div>  
            <div class="sub-item borderBox">Sub Item 3</div>  
            <div class="sub-item borderBox">Sub Item 4</div>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2024 My Website</p>  
    </footer>  
</body>  
</html>